<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="story">
      <div class="zhuan">
        <p>专辑<span>（{{this.quanDatas.length}}）</span></p>
      </div>
      <div class="storys">
        <div class="on leftHua delay1" :style="div1" v-for="(item,index) in quanDatas" :key="index">
          <p>{{item.bookName}}</p>
          <p>{{item.center}}</p>
          <p><span class="iconfont icon-erji1"></span><span>982201次</span></p>
          <div><span>{{item.ji}}集</span></div>
        </div>
        <!-- <div class="on leftHua" :style="div2">
          <p>奶爸来袭</p>
          <p>档位线来临时最大的危险就是奶爸！</p>
          <p><span class="iconfont icon-erji1"></span><span>53432次</span></p>
          <div><span>21集</span></div>
        </div> -->
      </div>
    </div>

    <div class="buy-last">
      <div class="zhuan">
        <p>单集<span>（{{this.danDatas.length}}）</span></p>
      </div>
      <div class="buy-dan leftHua">
        <div class="dan" v-for="(item,index) in danDatas" :key="index">
          <div>
            <img src="../../../../static/img/图片 5@1x (3).png" alt="" />
          </div>
          <div>
            <strong>{{item.name}}</strong>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import animated from 'animate.css';
import picture1 from "@/assets/图片 5 Copy@1x (1).png";
import picture2 from "@/assets/图片 5 Copy 2@1x (2).png";
import * as apis from "../../api/home"
export default {
  name: '',
  data() {
    return {
      msg: "测试",
      div1: {
        backgroundImage: `url(${picture1})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      div2: {
        backgroundImage: `url(${picture2})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      danDatas:[],
      quanDatas:[]
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$store.state.order.user.title)
      apis.danjiBook({dianhua:this.$store.state.order.user.title}).then((res)=>{
        console.log(res.data.code)
        this.danDatas = res.data.code
      })

 apis.quanBook({dianhua:this.$store.state.order.user.title}).then((res)=>{
        console.log(res.data.code,22)
        this.quanDatas = res.data.code
      })
  },
  // Vue方法定义
  methods: {
      
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../assets/font/iconfont.css");
.btns {
  margin-top: 14px;
}
.btns button {
  width: 97px;
  height: 30px;
  line-height: 20px;
  border-radius: 30px;
  background: white;
  /* color: rgba(254, 0, 86, 100); */
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: Arial;
  /* border: 1px solid rgba(254, 0, 86, 100); */
}
.btns button:nth-child(1) {
  margin-left: 101px;
  color: rgba(254, 0, 86, 100);
  border: 1px solid rgba(254, 0, 86, 100);
}
.btns button:nth-child(2) {
  margin-left: 19px;
  border: 1px solid rgba(206, 206, 206, 100);
  color: rgba(206, 206, 206, 100);
}
.story {
  margin-top: 18px;
}
.zhuan p {
  width: 226px;
  height: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  margin-left: 33px;
  font-family: PingFangSC-regular;
}
.storys {
  margin-top: 10px;
  margin-left: 33px;
}
.on {
  width: 348px;
  height: 182px;
  line-height: 20px;
  border-radius: 26px;
  background-color: rgba(253, 211, 60, 100);
  text-align: center;
  margin-bottom: 20px;
  transform: translateX(110%);
}
.on:nth-child(1) {
  margin-right: 15px;
  background: #fd8ebe;
  
}
/* 专辑以下动画（向左滑） */
.leftHua{
  animation:leftMove 0.8s forwards;
}
.delay1{
  animation:leftMove 0.8s 0.1s forwards;
}
@keyframes leftMove{
  0%{
    transform: translateX(110%);
  }
  60%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(5%);
  }
  100%{
    transform: translateX(0%);
  }
}
.on p:nth-child(1) {
  /* width: 117px; */
  padding-top: 19px;
  padding-left: 24px;
  font-weight: 700;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;
  font-size: 23px;

  text-align: left;
  font-family: 方正准圆-标准;
}
.on p:nth-child(2) {
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 38px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.on p:nth-child(3) {
  background-color: transparent;
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 44px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.on p:nth-child(3) span:nth-child(1) {
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-right: 5px;

  display: inline-block;
  /* background: olivedrab; */
}
.on p:nth-child(3) span:nth-child(2) {
  width: 70px;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  background-color: transparent;
  text-align: left;
  font-family: 方正准圆-标准;
}
.on div {
  background-color: transparent;
  left: 272px;
  top: -14px;
  width: 76px;
  height: 30px;
  position: relative;
  line-height: 20px;
  border-radius: 26px 0px 26px 0px;

  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
}
.on:nth-child(1) div {
  background-color: #ffc805;
}
.on:nth-child(2) div {
  background-color: #09d0b2;
}
.on div span {
  background-color: transparent;
  color: rgba(255, 255, 255, 100);
  width: 50px;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: 方正准圆-标准;
  display: inline-block;
}
.buy-dan {
  margin-top: 10px;
}
.dan {
  display: flex;
  height: 80px;
  overflow: hidden;
  margin-bottom: 15px;
}
.dan div:nth-child(1) {
  margin-left: 33px;
}
.dan div:nth-child(2) {
  margin-left: 11px;
}
.dan div:nth-child(2) strong {
  width: 260px;
  height: 32px;
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  text-align: left;
  font-family: 方正准圆-标准;
  /* margin-bottom: 2px; */
  display: inline-block;
}
.dan div:nth-child(2) p {
  left: 129px;
  top: 643px;
  width: 248px;
  height: 51px;
  color: rgba(151, 151, 151, 100);
  font-size: 12px;
  line-height: 23px;
  text-align: left;
  font-family: 方正准圆-标准;
  letter-spacing: 3px;
}


</style>